<script setup>
import {reactive, ref} from "vue";
  import reserveApi from "@/api/reserveApu.js";
  import memberApi from "@/api/memberApi.js";
  import courseApi from "@/api/courseApi.js";
  import {ElMessage} from "element-plus";

  let pageInfo = ref({})
  let reserves =reactive([])
  loadReserve()
  /*加载数据*/
  function loadReserve(){
    console.log(pageInfo)
    reserveApi.getAll(pageInfo.value).then(resp=>{
      reserves = resp.data.list
      console.log("预约信息",reserves)
      pageInfo.value.total=resp.data.total
    })
  }
  /*格式化状态*/
  function fmtStatus(row){
    return ["已取消","未签到","上课中","已完课","已签到"][row.status]
  }
  /*会员列表*/
  let members = ref([])
  getAllMember()
  function getAllMember(){
    memberApi.getAllMembers().then(resp=>{
      members.value=resp.data
    }).catch((err)=>ElMessage.error("请求异常"))
  }
  /*课程列表*/
  let courses = ref([])
  getAllCourse()
  function getAllCourse() {
    courseApi.getAllCourses().then(resp => {
      courses.value = resp.data
    }).catch((err) => ElMessage.error("请求异常"))
  }
  /*查询*/
  function onSearch(){
    loadReserve()
  }
  /*添加*/
  let addVisible = ref(false)
  let addReserve = reactive({})
  function showAdd(){
    addVisible.value = true
  }
  function handleAdd(){
    reserveApi.add(addReserve).then(resp=>{
      if (resp.code === 200){
        ElMessage.success("添加成功")
        addReserve = reactive({})
        addVisible.value = false
        loadReserve()
      }else{
        ElMessage.error(resp.msg)
        loadReserve()
      }
    }).catch(()=>ElMessage.error("请求异常"))
  }
  /*编辑*/
  let editVisible = ref(false)
  let editReserve = reactive({})
  function showEdit(row){
    editVisible.value = true
    editReserve = row
  }
  function handleEdit(){
    reserveApi.edit(editReserve).then(resp=>{
      if (resp.code===200){
        ElMessage.success("修改成功")
        editVisible.value = false
        loadReserve()
      }else{
        ElMessage.error(resp.msg)
        editVisible.value = false
        loadReserve()
      }
    }).catch(()=>ElMessage.error("请求异常"))
  }
  /*取消预约*/
  function handleCancel(row){
    reserveApi.cancel(row).then(resp=>{
      if (resp.code===200){
        ElMessage.success("取消预处成功")
        location.reload()
      }else{
        ElMessage.error(resp.msg)
        location.reload()
      }
    }).catch(()=>ElMessage.error("请求异常"))
  }
</script>

<template>
  <div class="content">
    <el-form :model="pageInfo" :inline="true">
      <el-form-item label="会员" :label-width="60">
        <el-select
            v-model="pageInfo.memberId"
            filterable
            placeholder="请选择会员"
            style="width: 240px"
            clearable
        >
          <el-option
              v-for="item in members"
              :key="item.id"
              :label="item.name + '-' + item.phone"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="课程" :label-width="60">
        <el-select
            v-model="pageInfo.courseId"
            filterable
            placeholder="请选择课程"
            style="width: 240px"
            clearable
        >
          <el-option
              v-for="item in courses"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch"><el-icon><Search></Search></el-icon></el-button>
      </el-form-item>
    </el-form>
    <div class="bar">
      <el-button type="success" @click="showAdd" >添加预约</el-button>
    </div>
    <el-table :data="reserves" :stripe="true" :border="true" style="width: 100%">
      <el-table-column prop="id" label="ID" width="60" />
      <el-table-column prop="member.name" label="会员"  width="100"/>
      <el-table-column prop="course.name" label="课程" width="180" />
      <el-table-column prop="coach.name" label="教练" />
      <el-table-column prop="course.time" label="时间" width="180" />
      <el-table-column prop="course.length" label="时长"  width="80"/>
      <el-table-column prop="reserveTime" label="预约时间" width="180" />
      <el-table-column prop="score" label="评分"  width="60"/>
      <el-table-column prop="comment" label="评语" width="180" />
      <el-table-column prop="commentTime" label="评价时间" width="180" />
      <el-table-column prop="status" label="状态" width="80" :formatter="fmtStatus"/>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="small" type="warning" v-if="scope.row.status==1"
                     @click="handleCancel(scope.row)">取消预订</el-button>
          <el-button size="small" type="success"
                     @click="showEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination class="page" v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
                     :total="pageInfo.total" :page-sizes="[10, 20, 50, 100]" :background="true"
                     layout="total, sizes, prev, pager, next, jumper" @change="loadReserve" />
    </div>
  </div>

  <!-- 添加的弹窗 -->
  <el-dialog v-model="addVisible" title="创建新预约" width="500">
    <el-form :model="addReserve">
      <el-form-item label="会员" :label-width="60">
        <el-select
            v-model="addReserve.memberId"
            filterable
            placeholder="请选择会员"
            style="width: 240px"
        >
          <el-option
              v-for="item in members"
              :key="item.id"
              :label="item.name + '-' + item.phone"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="课程" :label-width="60">
        <el-select
            v-model="addReserve.courseId"
            filterable
            placeholder="请选择课程"
            style="width: 240px"
        >
          <el-option
              v-for="item in courses"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAdd">
          立即预约
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 编辑的弹窗 -->
  <el-dialog v-model="editVisible" title="编辑预约" width="500">
    <el-form :model="editReserve">
      <el-form-item label="会员" :label-width="60">
        <el-select
            v-model="editReserve.memberId"
            filterable
            placeholder="请选择会员"
            style="width: 240px"
        >
          <el-option
              v-for="item in members"
              :key="item.id"
              :label="item.name + '-' + item.phone"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="课程" :label-width="60">
        <el-select
            v-model="editReserve.courseId"
            filterable
            placeholder="请选择课程"
            style="width: 240px"
        >
          <el-option
              v-for="item in courses"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEdit">
          修改预约
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style>
</style>